【watchOS】画面をタップせずに手のジェスチャだけで操作するAssistiveTouchを試してみた

リルオッサ

2021.11.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

watchOS 8で追加されたAssistiveTouchにとても興味があったので実際に試してみることにしました。

AssistiveTouch機能はiPhone、iPadにもありますが、今回はwatchOSのAssistiveTouchを試したものになりますので、ここでいうAssistiveTouchはwatchOSのものだと思っていただければと思います。

WWDC21: Create accessible experiences for watchOSの発表を参考しながら試してみたのでこちらの発表を見ていただくとより詳細な情報が載っているかと思います。

環境

watchOS 8.0.1
Xcode 13.0

AssistiveTouchとは

片手のジェスチャだけで Apple Watchを操作できる機能です。詳しい説明は、Apple Watch で AssistiveTouch を使うに記載されています。その中からいくつか項目を抜粋してお伝えいたします。

AssistiveTouchを有効にする

Apple Watch > 設定 App > アクセシビリティ > AssistiveTouch のボタンをOnすると有効になります。

手のジェスチャだけで操作するにはハンドジェスチャもオンになっている必要があるのでオンになっているか確認しておきましょう。

ハンドジェスチャ

ハンドジェスチャでは、決められた4つのジェスチャに対してどういう操作をするか割り当てることが出来ます。各ジェスチャに対してデフォルトで操作が割り当てられていますが、操作内容はカスタムすることも可能になっています。

クレンチ ?

手を開いた状態からグーにする動作
デフォルトでは「タップ」が割り当てられています

ダブルクレンチ ??

クレンチを素早く二回行う動作
デフォルトでは「アクションメニュー」が割り当てられています

ピンチ ?

人差し指と親指を摘む動作
デフォルトでは「順方向」が割り当てられています
- 順方向にフォーカスが移動していきます

ダブルピンチ ?

ピンチを素早く二回行う動作
デフォルトでは「逆方向」が割り当てられています
- 逆方向にフォーカスが移動していきます

Appleのアプリで試してみる

AppleのストップウォッチアプリでAssistiveTouchを試してみました。

実際にクレンチとピンチの動きだけ操作できているのが伝わると思います。

自作アプリでも試してみる

今回はAssitiveTouchを試す為にこのようなアプリを作成してみました。

画面の中央にTextを配置して、下部には横一列でButtonを三つ配置しています。

自作アプリのコード

import SwiftUI

struct ContentView: View {

    @State var expression = "?"

    var body: some View {
        VStack {
            Text(expression)
                .font(.system(size: 80))
                .accessibilityRespondsToUserInteraction()
                .onTapGesture {
                    expression = "?"
                }
            HStack {
                Button {
                    expression = "?"
                } label: {
                    Text("?")
                        .font(.system(size: 30))
                }
                .accessibilityAddTraits(.isButton)
                Button {
                    expression = "?"
                } label: {
                    Text("?")
                        .font(.system(size: 30))
                }
                Button {
                    expression = "?"
                } label: {
                    Text("?")
                        .font(.system(size: 30))
                }
            }
        }
    }
}

ボタンがタップされると、その絵柄に中央のテキストが変わるシンプルなものになります。また画面中央のラベルがタップされると"?"のテキストに変わる実装としています。

onTapGestureに対応する

Buttonは.accessibilityAddTraits(.isButton)の追加実装することなく理想の動きをしてくれたのですが、静的要素に対してonTapGestureを行いたい場合は、そのままではアクセシビリティに対応してくれません。

今回は、Textに対して下記のコードを記述してアクセシビリティに対応させました。

Text(expression)
                .font(.system(size: 80))
                .accessibilityRespondsToUserInteraction()
                .onTapGesture {
                    expression = "?"
                }

accessibilityRespondsToUserInteraction()はアクセシビリティでのユーザー操作に反応するかを引数によって決めるメソッドです。この引数はrespondsToUserInteraction: Bool = trueになっており、値を入れない場合はユーザー操作への反応が有効になります。

これでアクセシビリティとして選択可能になり、onTapGustureもAssistiveTouch上で動いてくれるようになりました。